<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul {
        /* 1、给父元素也添加float。这样让父元素与子元素一起脱离文档流浮动起来，保证子元素在父元素内，这样父元素就能自适应子元素的高度，但是此方法有一弊端，一定会影响父元素之后的元素排列，甚至影响布局 */
        /* 1.float: left; */
        /* 设置高度 前提以知道 */

        /* 隐藏溢出，当内容超过其父元素时，可以使用该属性和值将溢出的部分裁剪掉，使页面更加美观 */
        overflow:hidden;
        /* 没设置浮动前父元素的背景色还在 */
        background-color: #ccc;
        /* height: 500px; */
        /* 为父元素添加一个5px的边框，在li元素添加浮动后，边框并没有被内容撑开 */
        /* 但在第二个示例中发现其实父元素并没有消失，只是高度被计算为0 */
        border: 5px solid #ccc;
    }
    li {
        float: left;
        list-style: none;

    }
    
</style>
<body>
   <ul>
       <li>home</li>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>3</li>
   </ul>

</body>
</html>